import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools} from 'weaver-mobile';
import Map from './Map';
import Btn from './Btn';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Content extends Component {
    searchNearBy = () => {
        const {
            history,
            store: {
                searchNearBy,
                searchNearByLayout,
                currentPositionData,
                nearList
            }
        } = this.props;
        searchNearBy(() => history.push({pathname: searchNearByLayout.path, state: {
            longitude: nearList.length > 0 ? nearList[0].longitude : currentPositionData.longitude,
            latitude: nearList.length > 0 ? nearList[0].latitude :currentPositionData.latitude
        }}));
    }

    render(){
        const {store} = this.props;
        const {currentPositionData, positionStatus, nearly} = store;
        return (
            <div className='content'>
                <div className='currLocation'>
                    <div className='map'>
                        <Map store={this.props.store}/>
                    </div>
                </div>
                <div className='signPanel'>
                    <div className='locationInfo'>
                        <div className='myLocation'>
                            <div className='lbl'>{getLabel('126403','我的位置')}</div>
                            {
                                positionStatus && nearly=='1' && <div className='near' onClick={this.searchNearBy}>{getLabel('504543','附近位置')}</div> 
                            }
                        </div>
                        <div className='location text-elli'>{currentPositionData.address || ''}</div>
                    </div>
                    <Btn store={store}/>
                </div>
            </div>
        )
    }
}